<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">
                        <el-form-item label="状态:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.orderStatus">
                                <el-option label="审核中" :value="1"></el-option>
                                <el-option label="已通过" :value="2"></el-option>
                                <el-option label="以拒绝" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="时段:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.distributionTimeId" clearable>
                                <el-option v-for="item in disTimes" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="站长:">
                            <el-select v-model="condition.siteId" class="form-item" filterable remote reserve-keyword clearable
                                       placeholder="请输入关键词" :remote-method="loadSiteList" :loading="selectLoading">
                                <el-option
                                        v-for="item in siteList"
                                        :key="item.userId"
                                        :label="item.siteName"
                                        :value="item.userId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退单时间:">
                            <el-date-picker v-model="condition.dateRange" style="margin-top: 5px" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="订单号:">
                            <el-input v-model="condition.orderId" class="form-item"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人:">
                            <el-input v-model="condition.contacts" class="form-item"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话:">
                            <el-input v-model="condition.contactNumber" class="form-item"></el-input>
                        </el-form-item>

                        <div class="form-item">
                            <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询</el-button>
                        </div>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="44px"/>
            <el-table-column prop="orderId" label="订单号" header-align="center" align="center" width="150px">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDetail(scope.row.orderId)">{{ scope.row.orderId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品" header-align="center" align="center" width="200px"/>
            <el-table-column prop="distributionTimeName" label="送货时段" header-align="center" align="center" width="90px"/>
            <el-table-column prop="contacts" label="联系人" header-align="center" align="center" width="90px"/>
            <el-table-column prop="contactNumber" label="电话" header-align="center" align="center" width="100px"/>
            <el-table-column prop="goodAmount" label="商品额(退)" header-align="center" align="center" width="80px"/>
            <el-table-column prop="distributionFee" label="配送费(退)" header-align="center" align="center" width="80px"/>
            <el-table-column prop="couponAmount" label="券(退)" header-align="center" align="center" width="70px"/>
            <el-table-column prop="returnAmount" label="实退额" header-align="center" align="center" width="70px"/>

            <el-table-column prop="createTime" label="申请时间" header-align="center" align="center" width="140px;"/>
            <el-table-column prop="status" label="状态" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    {{ scope.row.orderStatus === 1 ? "已申请" : (scope.row.orderStatus === 2 ? "已通过" : "已拒绝") }}
                </template>
            </el-table-column>
            <el-table-column prop="handleTime" label="处理时间" header-align="center" align="center"/>
            <el-table-column prop="handleUserName" label="处理人" header-align="center" align="center"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showHandle(scope.row)" v-if="scope.row.orderStatus === 1">处理</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="处理" :visible.sync="dialogVisible" width="600px" append-to-body @closed="onDialogClosed">
            <div>
                <el-form ref="form" :model="form" label-width="120px" size="mini">
                    <el-form-item label="状态：" prop="orderStatus">
                        <el-radio-group v-model="form.orderStatus">
                            <el-radio :label="2">通过</el-radio>
                            <el-radio :label="3">拒绝</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否退配送费：" prop="isReturnDistributionFee" v-if="form.orderStatus === 2 && isReturnDistributionFee === 1">
                        <el-radio-group v-model="form.isReturnDistributionFee">
                            <el-radio :label="0">不退配送费</el-radio>
                            <el-radio :label="1">退配送费(最后一个商品)</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="实退金额：" v-if="form.orderStatus === 2 && isReturnDistributionFee === 1">
                        <el-input-number v-model="form.returnAmount" :min="0" :precision="2" :max="row.returnAmount" style="width: 200px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="拒绝原因：" prop="failureReason" v-if="form.orderStatus === 3">
                        <el-input v-model="form.failureReason" style="width: 305px;" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="mxDialogVisible" width="80%" append-to-body>
            <div style="margin-bottom: 20px; color: grey; font-size: 12px; line-height: 25px">
                <table>
                    <tr>
                        <th>站长姓名：</th>
                        <td>{{ detail.site ? detail.site.siteName : '—'}}</td>
                        <th>站长电话：</th>
                        <td>{{ detail.site ? detail.site.phone : '—'}}</td>
                    </tr>
                    <tr>
                        <th>下单时间：</th>
                        <td>{{ detail.order.createTime}}</td>
                        <th>付款时间：</th>
                        <td>{{ detail.order.payTime}}</td>
                        <th>收单时间：</th>
                        <td>{{ detail.order.acceptTime}}</td>
                        <th>配送时间：</th>
                        <td>{{ detail.order.distributionTime}}</td>
                        <th>支付单号：</th>
                        <td>{{ detail.order.payOrderId}}</td>
                    </tr>
                    <tr>
                        <th>商品金额：</th>
                        <td>{{ detail.order.goodsAmount}}</td>
                        <th>优惠券：</th>
                        <td>{{ detail.order.couponAmount}}</td>
                        <th>配送费：</th>
                        <td>{{ detail.order.distributionFee}}</td>
                        <th>实收金额：</th>
                        <td>{{ detail.order.actualAmount}}</td>
                        <th>地址：</th>
                        <td>{{ (detail.order.address ? detail.order.address : (detail.order.villageName ? detail.order.villageName : '')) + detail.order.houseNo }}</td>
                    </tr>
                    <tr>
                        <th>站长佣金：</th>
                        <td>{{ detail.order.siteFee}}</td>
                        <th>是否到账：</th>
                        <td>{{ detail.order.isToAccount === 1 ? "已到帐" : "未到账"}}</td>
                        <th>是否有退货：</th>
                        <td>{{ detail.order.isReturn === 1 ? "有退货" : "未退货"}}</td>
                        <th>退货金额：</th>
                        <td>{{ detail.order.returnAmount}}</td>
                    </tr>
                </table>
            </div>
            <div>
                <el-table :data="detail.items" border stripe highlight-current-row style="width: 100%" size="mini">
                    <el-table-column type="index" header-align="center" align="center" width="60px"/>
                    <el-table-column prop="depotNo" label="库存编码" header-align="center" align="center" width="150px;"/>
                    <el-table-column prop="name" label="商品名称" header-align="center" align="center"/>
                    <el-table-column prop="unitPrice" label="单价" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="weight" label="重量(克)" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="price" label="售价" header-align="center" align="center" width="85px;"/>
                    <el-table-column prop="promotion" label="促销类型" header-align="center" align="center" width="70px">
                        <template slot-scope="scope">
                            {{ scope.row.promotion === 0 ? '无' : (scope.row.promotion === 1 ? '特价' : '限购')}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="promotionPrice" label="促销价" header-align="center" align="center" width="65px"/>
                    <el-table-column prop="promotion" label="退货状态" header-align="center" align="center" width="70px">
                        <template slot-scope="scope">
                            {{ scope.row.returnStatus === 0 ? '—' : (scope.row.returnStatus === 1 ? '审核中' : (scope.row.returnStatus === 2 ? '已通过' : '已拒绝'))}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="returnAmount" label="退货金额" header-align="center" align="center" width="70px"/>
                </el-table>
            </div>
        </el-dialog>

    </div>

</template>

<script>
    import {getReturnList, orderDetail, isReturnDistributionFee, handleReturnApply} from '@/api/order/order'
    import {getSiteList} from '@/api/site/site'
    import {getDisTimes} from '@/api/config/distime'

    export default {
        name: 'site-cash',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                mxDialogVisible: false,
                btnLoading: false,
                selectLoading: false,
                siteList: [],
                disTimes: [],
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    orderStatus: 1,
                    contacts: null,
                    contactNumber: null,
                    dateRange: [],
                    start: null,
                    end: null
                },
                detail: {
                    order: {},
                    items: []
                },
                row: {},
                data: {},
                isReturnDistributionFee: 0,
                form: {
                    applyId: null,
                    orderStatus: 2,
                    returnAmount: 0,
                    failureReason: "",
                    isReturnDistributionFee: null
                },
            }
        },
        computed: {},
        mounted() {
            this.loadDisTimes()
            this.loadList()
        },
        methods: {
            async loadSiteList(query) {
                if (query.length >= 2) {
                    this.selectLoading = true
                    getSiteList({pageSize: 10, currentPage: 1, keyword: query}).then((res) => {
                        this.siteList = res.data
                        this.selectLoading = false
                    })
                }
            },
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadDisTimes() {
                let res = await getDisTimes();
                this.disTimes = res.data
            },
            async loadList() {
                this.loading = true
                let params = JSON.parse(JSON.stringify(this.condition))
                if (this.condition.dateRange && this.condition.dateRange.length > 0) {
                    params.start = this.condition.dateRange[0]
                    params.end = this.condition.dateRange[1]
                    params.dateRange = null
                }
                let res = await getReturnList(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            async showDetail(id) {
                this.loading = true
                let res = await orderDetail(id)
                this.loading = false
                if (res.code !== "0") return
                this.detail = res.data
                this.mxDialogVisible = true
            },
            showHandle(row) {
                this.form.applyId = row.id
                this.row = row;
                this.form.returnAmount = row.returnAmount
                isReturnDistributionFee({detailsId: row.orderDetailId }).then((res) => {
                    this.isReturnDistributionFee = res.data.isReturn
                    this.form.isReturnDistributionFee = res.data.isReturn
                    this.dialogVisible = true;
                })
            },
            onDialogClosed() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields()
                }
            },
            async onSubmit() {
                this.btnLoading = true;
                let res = await handleReturnApply(this.form)
                this.btnLoading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.dialogVisible = false;
                this.$notify({title: '消息', message: '处理成功', type: 'success'});
                this.loadList()
            }
        }
    }
</script>

<style scoped>
</style>
